/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html
{
  height: 100%;
  width: 100%;

  /*Sets the initial zoom level of the page to 1 every time it loads*/
  initial-scale: 1.0;

  /*Limits phone website view to only horizontal scrolling*/
  touch-action: pan-x;
  /*Does the same but for PC zooming*/
  user-scalable: no;

  overflow-y: hidden; /*hide vertical scroll*/
  overflow-x: hidden; /*hide horizontal scroll*/
}

/*Creating fonts for use on page*/
@font-face
{
  font-family: 'dots';
  /*.. signals going back one folder from the CSS folder - so returning to the root - so I can then reference the resources folder*/
  src: url(../Resources/dotFont.ttf);
}

body 
{
  background: rgb(32,28,28);
  /*background: linear-gradient(0deg, rgba(108,78,0,1) 0%, rgba(231,174,86,1) 25%, rgba(145,173,223,1) 33%, rgba(45,75,142,1) 100%);*/
  color: white;

  /*Second font is a general backup in case dots can't load*/
  font-family: dots, monospace;
  font-size: 1.15em;
  
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  position: relative;
}

div
{
  border: 1px solid white;
}

/*Give divs solid backgrounds when user is on mobile*/
@media only screen and (max-device-width: 500px) and (orientation: portrait) 
{
  div { background: rgb(32,28,28); }
  .bio { max-height: 20vh}
}
@media only screen and (max-device-height: 500px) and (orientation: landscape) 
{
  div { background: rgb(32,28,28); }
  .bio { max-height: 20vh}
}


.fullScreen
{
  width: 100vw;
  max-width: 100%;
  position: relative;

  /*Weird number is so bottom line of div can avoid going offscreen*/
  height: 98.1vh;

  overflow: hidden;
}

/*Below styles links throughout the site*/
a
{
  color: white;
}
a:hover
{
  font-weight: bold;
}


/*Formats click-and-drag selection field*/
::selection 
{
  color: orangered;
  background: none;
}

/* Custom Variations of Paragraph Class */
.rightSide
{
  text-align: right;
}
.leftSide
{
  text-align: left;
}

/*General quadrant aligns.*/
.topLeft
{
  position: absolute;
  left: 0;
  top: 0;

  /*Must have this minimum height and width to define basic scale on page.*/
  /*Interacts with .bio vertical scaling*/
  min-width: 25vw;
  min-height: 15vw;

  height: fit-content;
  width: fit-content;

  padding: 15px;
  margin: 20px;

}
.topRight
{
  right: 0;
  top: 0;
}
.baseRight
{
  bottom: 0;
  right: 0;
}
.baseLeft
{
  bottom: 0;
  left: 0;
}
.midRight
{
  top: 50%;
  right: 0%;
  translate: 0% -50%; /*Makes div origin point its centre, rather than top right vertex*/
}
.midLeft
{
 
  top: 40%;
  left: 0;
  /*translate: 0% 0%; /*Makes div origin point its centre, rather than top right vertex*/
}
.midCentre
{
  top: 0%;
  left: 0%;
  translate: -50% -50%; /*Makes div origin point its centre, rather than top right vertex*/
}
.topRight, .baseLeft, .baseRight, .midRight, .midLeft, .midCentre
{
  position: absolute; /*Affixes placement based on screen space, with no relation to surrounding divs*/
  padding: 20px; /*Exterior margin*/
  margin: 20px; /*Interior margin*/
}

/*Central bulletin column*/
.bulletin
{
  /*Conforming div height to height of .fullscreen element*/
  height: 91.75%;
  max-width: 33vw;

  top: 0%;
  left: 50%;

  translate: -50% 0%; /*Makes div origin point its centre, rather than top right vertex*/

  position: absolute;
  padding: 20px;
  margin: 20px;

  text-align: center;

  overflow: hidden;

}
.bulletinImage
{
  position: absolute;

  height: 90%;
  padding: 10px;
  translate: -50% 0%; /*Makes div origin point its centre, rather than top right vertex*/
}

/*Upper left image and bio*/
/*There's some complex scaling going on here. To explain:*/
/*The .bio component controls the scale of the surrounding .topLeft div*/
/*The .stamp is exempt from the .topLeft's scaling due to being absolute positioned*/
/*The .stamp maintains a consistent 38% width of the textbox, which allows it to scale without breaching upper or lower bounds*/
/*When in mobile, to let user see full bio, it can scroll.*/
/*Scroll is enabled by locking .bio height in the media types at the top of the page*/
.stamp
{
  position: absolute;

  /*Define consistent stamp height and width*/
  width: 38%;
  left: 22.5%;

  translate: -50% 0%;

  margin: 1px;

}
.stamp:hover
{
  filter: grayscale(100%) saturate(200%);
  /*transform: scaleX(-1);*/
}

.bio
{
  width: 50%;
  min-height: 14vw; /*Conforms bio div height to height of stamp*/

  padding: 2%;

  float: right;
  text-align: left;

  overflow: scroll; /*Used only in mobile interface*/
  /*Hide scrollbar*/
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.bio::-webkit-scrollbar 
{ 
    display: none;  /* Safari and Chrome */
}

.links, .events
{
  white-space: nowrap; /*Prevents text from wrapping to next line without a <br> tag*/
  overflow: visible;
  
  height: 45%;
  /*min-width: 80%;*/ /*May be necessary for keeping .links and .events the same horizontal length when adding new events*/

  padding: 20px;
  text-align: right;
}

/*Controls dropdown work directory*/
.directory
{
  overflow: scroll;
  white-space: nowrap;

  text-align: left;
  max-height: 51.75vh;
  max-width: 82vw;

  padding: 0px 10px 0px 0px;

  /*Hide scrollbar*/
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.directory::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

/*Hide borders inside directory, and prevent bulletpoints appearing to their sides*/
.item, .multilevel, .multilevel ul, .directory, .leftSide, .subItem, .sub2Item
{
  border-style: none;
  list-style: none;
}

/*Highlighting labels in directory when moused over.*/
.directory label:hover,
.subItem label:hover, 
.sub2Item label:hover {font-weight: bold;}

/*Functionality of directory dropdowns*/
.multilevel, .item ul, .directory input[type="checkbox"]
{
  display: none;
}
#menu:checked ~ .multiLevel, .item input:checked ~ ul
{
  display:block;
}

/*Formatting of number entry*/
.secretEntry
{
  width: 2em;
  height: 2em;
  border: none;
  font-family: consolas, monospace;
  text-align: center;
  background-color: black;
  color: white;
}
.secretEntry:focus /*Makes the box that appears when selecting an input perfectly square*/
{
    outline: 1px solid white;
}

/*Removes up-down arrows from number input fields*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 
{
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] 
{
    -moz-appearance:textfield; /* Firefox */
}

footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 60px;   /* Height of the footer */
   font-size: 0.65em;
   color: black;
   z-index: -10; /*Places footer behind other elements*/
}